<template>
  <el-dialog v-model="dialogVisible" title="上传头像" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" destroy-on-close width="600px">
    <div class="avatar-container">
      <!-- {{dialogVisible}} -->
      <!-- 待上传图片 -->
      <div v-show="!options.img">
        <el-upload
          ref="elUpload"
          class="upload"
          action="#"
          :on-change="upload"
          accept="image/png, image/jpeg, image/jpg"
          :show-file-list="false"
          :auto-upload="false"
        >
          <el-button slot="trigger" ref="uploadBtn" type="primary"> 选择图片 </el-button>
        </el-upload>
        <div>支持jpg、png格式的图片，大小不超过5M</div>
      </div>
      <!-- <img :src="options.img" alt=""> -->
      <!-- 已上传图片 -->
      <div v-show="options.img" class="avatar-crop">
        <vueCropper
          ref="cropper"
          class="crop-box"
          :img="options.img"
          :auto-crop="options.autoCrop"
          :fixed-box="options.fixedBox"
          :can-move-box="options.canMoveBox"
          :auto-crop-width="options.autoCropWidth"
          :auto-crop-height="options.autoCropHeight"
          :center-box="options.centerBox"
          :fixed="options.fixed"
          :fixed-number="options.fixedNumber"
          :can-move="options.canMove"
          :can-scale="options.canScale"
        ></vueCropper>
      </div>
    </div>
    <template #footer>
			<span class="dialog-footer">
				<div class="reupload" @click="reupload">
					<span v-show="options.img">重新上传</span>
				</div>
				<div>
					<el-button @click="closeDialog">取 消</el-button>
					<el-button type="primary" @click="getCrop">确 定</el-button>
				</div>
			</span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { ref, reactive, defineComponent } from 'vue'
import { VueCropper } from 'vue-cropper'
import 'vue-cropper/dist/index.css'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useuploadApi } from '@/api/sys/upload'
import { base64ToFile } from '@/utils/tool'
import { useUserStore } from '@/store/modules/user'
import { useUserInfoSubmitApi } from '@/api/sys/user'
const userStore = useUserStore()
export default defineComponent({
  components: {
    VueCropper
  },
  props: {
    dialogVisible: {
      type: Boolean
    }
  },
  setup(props, { emit }) {
    // console.log(11111);
    const cropper = ref()
    const uploadBtn = ref()
    const elUpload = ref()
    const options = reactive({
      img: '', // 原图文件
      autoCrop: true, // 默认生成截图框
      fixedBox: false, // 固定截图框大小
      canMoveBox: true, // 截图框可以拖动
      autoCropWidth: 200, // 截图框宽度
      autoCropHeight: 200, // 截图框高度
      fixed: true, // 截图框宽高固定比例
      fixedNumber: [1, 1], // 截图框的宽高比例
      centerBox: true, // 截图框被限制在图片里面
      canMove: false, // 上传图片不允许拖动
      canScale: false // 上传图片不允许滚轮缩放
    })
    // vueCropper组件 裁剪配置信息

    // 读取原图
    const upload: UploadProps['onChange'] = (file, uploadFiles) => {
      //console.log(file);

      const isIMAGE = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'
      const isLt5M = file.raw.size / 1024 / 1024 < 5
      if (!isIMAGE) {
        ElMessage.warning('请选择 jpg、png 格式的图片')
        return false
      }
      if (!isLt5M) {
        ElMessage.warning('图片大小不能超过 5MB')
        return false
      }
      let reader = new FileReader()

      reader.readAsDataURL(file.raw)
      //console.log(reader);

      reader.onload = e => {
        options.img = e.target.result // base64
      }
      elUpload.value.clearFiles() //这里处理重新上传时，upload组件change事件错误问题
    }
    // 获取截图信息
    const getCrop = () => {
      // 获取截图的 base64 数据
      // cropper.value.getCropData(data => {
      // 	//  console.log(data);
      // })
      // 获取截图的 blob 数据
      //console.log(cropper.value);
      cropper.value.getCropData((data: string) => {
        let formData = new FormData()
        const toFile = base64ToFile(data)
        formData.append('file', toFile)
        //上传接口
        useuploadApi(formData).then(res => {
          userStore.user.avatar=res.data.url

          useUserInfoSubmitApi({
            "avatar":userStore.user.avatar,
            "realName":userStore.user.realName,
            "mobile":userStore.user.mobile,
            "email":userStore.user.email,
            "gender":userStore.user.gender

          }).then(() => {
            closeDialog()
            ElMessage.success('修改成功')
          })

        })
        //console.log(data);

        // emit('closeAvatarDialog')

      })
    }
    // 重新上传
    const reupload = () => {
      // console.log(uploadBtn.value.ref);

      uploadBtn.value.ref.click()
    }
    // 关闭弹框
    const closeDialog = () => {
      emit('closeAvatarDialog')
      options.img = ''
    }
    return {
      options,
      cropper,
      uploadBtn,
      elUpload,
      upload,
      getCrop,
      reupload,
      closeDialog
    }
  }
})
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  .reupload {
    color: #409eff;
    cursor: pointer;
  }
}
.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 560px;
  height: 350px;
  background-color: #f0f2f5;
  margin-right: 10px;
  border-radius: 4px;
  .upload {
    text-align: center;
    margin-bottom: 24px;
  }
  .avatar-crop {
    width: 560px;
    height: 350px;
    position: relative;
    .crop-box {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      overflow: hidden;
    }
  }
}
</style>
